<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery Event Special</title>
    <script src="/libs/jquery.js"></script>
    <script src="/libs/myspecial.js"></script>

    <style>
        body {
            border: 2px dashed green;
        }

        div {
            border: 5px dashed yellow;
        }

        .l1 {
            background: gray;
            width: 600px;
            height: 420px;
        }

        .l2 {
            background: yellowgreen;
            width: 450px;
            height: 300px;
        }

        .l3 {
            background: brown;
            width: 300px;
            height: 180px;
        }
    </style>
</head>

<body>
    <div class="l1">
        <div class="l2">
            <div class="l3"></div>
        </div>
    </div>
    <input type="checkbox" name="xxx" id="yyy">
    <div class="l3"> </div>
    <script>
        var $a = $('body'), $div = $('div')

        $div.one('click', clickHandler)
        $a.on('click', '.l2', function () {
            console.log('test delagate type')
        })
        $a.on('dblclick', function () { })
        $a.on('mouseenter', function () { })
        var $input = $('#yyy')

        $input.on('click', function(){
            console.log(1)
        })

        function clickHandler(e) {
            console.log('once')
        }
    </script>
</body>

</html>